<template>
  <div class="menu-container">
    <!-- 数据列表 ---- 添加按钮 -->
    <div class="btn-container">
      <div class="left">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="toAddMenu">添加</el-button>
    </div>
    <!-- 表格 -->
    <div class="table-container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" prop="id" label="编号" width="60px" />
        <el-table-column align="center" prop="title" label="菜单名称" />
        <el-table-column align="center" label="菜单级数">
          <template #default="{ row }">
            <!-- level 为0 证明是一级菜单   不为0 证明是二级菜单 -->
            {{ row.level === 0 ? '一级' : '二级' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="前端名称" />
        <el-table-column align="center" prop="icon" label="前端图标">
          <template #default="{ row }">
            <i class="iconfont" :class="row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否显示">
          <template #default="{ row }">
            <!-- hidden 为1显示   为0不显示 -->
            <el-switch v-model="row.hidden" :active-value="0" :inactive-value="1"
              @click="SwitchHidden(row.id, row.hidden)" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sort" label="排序" />
        <el-table-column align="center" label="设置" width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="checkChildren(row.id)"
              :disabled="row.parentId !== 0">查看下级</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="toEditMenu(row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 组件 -->
    <div class="pagination-box">
      <!-- 测试  删除 -->
      <div class="delete">
        <el-input v-model.number="deleteMenuId" placeholder="谨慎操作!!! 防止误删!!!" />
        <el-button type="primary" size='large'
          :disabled="deleteMenuId == 97 || deleteMenuId == 99 || deleteMenuId == 117 || deleteMenuId == 118 || deleteMenuId == 126"
          @click="toDeleteMenu">确定删除</el-button>
      </div>
      <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
        :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import * as http from '@/request/http';
import router from '@/router';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
// import { useRoute } from 'vue-router';


// 表格数据
const tableData = ref<IMenuModel[]>([]);

// 分页器相关参数
const paginationParams = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100,
})

// 当前菜单的id (用作请求参数)  默认0 
const currentMenuId = ref(0);


// 抽离 请求方法   方便复用
// 传入一个id作为请求参数,id为0时是请求所有的一级菜单  id为具体的一级菜单id时是请求该菜单的二级菜单(查看下级)
const queryMenuList = (id: number) => {
  // 请求 菜单列表数据
  http.menu.getMenuListById({
    pageNum: paginationParams.currentPage,
    pageSize: paginationParams.pageSize,
    parentId: id,
  }).then(res => {
    tableData.value = res.data.list;  // 更新表格数据
    paginationParams.total = res.data.total;  // 更新分页器总数
  })
}

// 调用请求菜单列表的方法,获取菜单列表
queryMenuList(currentMenuId.value);

// 改变 分页器的页容量
const handleSizeChange = (val: number) => {
  paginationParams.pageSize = val;
  // 重新请求    更新数据
  queryMenuList(currentMenuId.value);
}
// 改变 分页器的当前页
const handleCurrentChange = (val: number) => {
  paginationParams.currentPage = val;
  // 重新请求  更新数据
  queryMenuList(currentMenuId.value);
}

// 点击 修改 菜单的显示状态 hidden 0显示  1隐藏
const SwitchHidden = (id: number, hidden: number) => {
  http.menu.updateMenuHidden({
    id, hidden
  }).then(res => {
    if (res.code === 200) {
      // 提示用户  切换成功
      ElMessage.success('切换成功!');
      console.log('切换成功 : ', res);

    }
  })
}

// 点击 添加 菜单  跳转到  添加菜单页面
const toAddMenu = () => {
  router.push('/ums/addMenu');  // 不需要query传参
}

// 点击 编辑  菜单  query传参  携带当前id
const toEditMenu = (id: number) => {
  router.push('/ums/addMenu?id=' + id);  // 跳转到(添加)编辑菜单页面,并且携带当前菜单的id
}

// 点击 查看下级  用当前菜单的id  去发送请求  获取下级菜单
const checkChildren = (id: number) => {
  // 修改当前菜单id,默认0是请求一级菜单
  currentMenuId.value = id;
  // 发送请求  获取下级菜单
  queryMenuList(currentMenuId.value);

  // 跳转
  // router.push(`/ums/menu?pid=${id}`);
}


// 测试 删除接口
const deleteMenuId = ref(100000);
// 点击 删除 菜单
const toDeleteMenu = () => {
  http.menu.deleteMenuById(deleteMenuId.value).then(res => {
    if (res.code === 200) {
      ElMessage.success('删除成功!');
      // 重新请求   更新数据
      queryMenuList(0);
      deleteMenuId.value = 10000;
    }
  })
}
</script>

<style scoped lang="less">
.menu-container {

  // 修改 按钮 禁用时的字体颜色
  :deep(.el-button.is-disabled) {
    color: #c0c4cc;
  }

  // 修改 icon图标的颜色
  .iconfont {
    color: #666 !important;
  }

  // 添加按钮
  .btn-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    margin: 20px 0;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);
    // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 4px;

    .left {
      display: flex;
      align-items: center;

      span {
        margin-left: 10px;
      }
    }
  }

  // 删除 
  .delete {
    display: flex;

    .el-button {
      margin-left: 20px;
    }
  }

  // 分页器
  .pagination-box {
    display: flex;
    // flex-direction: row-reverse;
    justify-content: space-between;
    margin: 20px 0;
  }
}
</style>